<template>
	<view class="wrapper">
		<view class="gz" @click="showgz">活动规则</view>
		<view class="money" :animation="animationData" v-if="money">
			{{money}}
		</view>
		<view class="btn" @click="dogetredbao">开启红包</view>
		
		
		<uni-popup ref="gzpop">
			<view class="gzwrapper">
				<view class="close" @click="$refs.gzpop.close()">X</view>
				<view class="title">种草红包活动规则</view>
				<view class="item">1.活动对象：人人聚全体用户。</view>
				<view class="item">2.活动内容：新用户首发种草或短视频，可参与红包抽奖。点赞越多，红包越大，每日最高200元。</view>
				<view class="item">3.点赞规则：每个用户点赞只计一次，以活动结束时数据为准。</view>
				<view class="item">4.抽奖机会：新用户每日一次抽奖机会，不累积。</view>
				<view class="item">5.邀请好友：邀请好友参与，好友点赞不影响邀请者。邀请者可能获额外奖励，详见公告。</view>
				<view class="item">6.红包领取：红包需按时领取，逾期作废。金额直接发放至微信余额，可用于平台消费。</view>
				<view class="item">7.活动期限：活动时间以平台公告为准。</view>
				<view class="item">8.注意事项：禁止刷赞、作弊，违规取消资格。平台故障或技术问题，不承担损失。人人聚保留最终解释权。</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import debounce from "@/utils/debounce.js"
	export default {
		
		data(){
			return {
				money:" ",
				animationData: {}
			}
		},
		
		onShow(){
			var animation = uni.createAnimation({
			      duration: 500,
			      timingFunction: 'ease',
			    })
				this.animation = animation
		},
		onLoad(){
		
			
		
			//查询用户是否可以领红包
			uni.request({
				url:"/wanlshop/find.find/hasFind",
				method:"POST",
				success(res){
					console.log(res);
					if(res.data.tag == 0){
						uni.switchTab({
							url:"/pages/user"
						})
					}
				}
			})
		},
		
		
		methods:{
			dogetredbao:debounce(function(){
				let that = this;
				uni.request({
					url:"/wanlshop/find.find/dogetredbao",
					method:"POST",
					success(res){
						console.log(res);
						if(res.data.tag == 1){
							that.money = res.data.money+"元";
							that.animation.opacity(1).scale(1.5,1.5).translate(-20, 0).step();
							that.animationData = that.animation.export()
						}else{
							uni.showToast({
								title:"网络错误,请重试",
								icon:"none"
							})
						}
					}
				})
			
			}),
			
			
			showgz(){

				this.$refs.gzpop.open();
			}
		}
		
		
	}
	
</script>

<style lang = "scss" scoped>
	.wrapper{
		width:100%;
		height:100vh;
		background:url('https://adminshop.12sxb.cn/uploads/redbao2.png');
		background-size:100% 100%;
		background-repeat: no-repeat;
		position:relative;
		.gz{
			padding:10rpx 20rpx;
			font-size:22rpx;
			color:#fff;
			background:goldenrod;
			display:inline-block;
			border-radius: 40rpx;
			box-sizing: border-box;
			position:absolute;
			right:20rpx;
			top:30rpx;
			
		}
		.money{
			width:220rpx;
			height:50rpx;
			font-size:58rpx;
			color:goldenrod;
			font-weight:bold;
			display:inline-block;
			position:absolute;
			left:50%;
			transform:translate(-50%,0);
			bottom:35vh;
			transform-origin:-50% 50%;
			opacity: 0;
		}
		.btn{
			color:red;
			font-size:42rpx;
			position:absolute;
			bottom:7.5vh;
			display:inline-block;
			width:400rpx;
			height:120rpx;
			text-align: center;
			left:50%;
			line-height:120rpx;
			transform:translate(-50%,0);
			font-weight: bold;
		}
		
		.gzwrapper{
			width:90%;
			background:#fff;
			margin:0 auto;
			padding:30rpx;
			border-radius: 20rpx;
			box-sizing: border-box;
			position:relative;
			.title{
				font-size:30rpx;
				font-weight: bold;
				text-align: center;
				margin-bottom:30rpx;
			}
			.item{
				padding:10rpx;
				line-height:130%;
			}
			.close{
				position:absolute;
				top:20rpx;
				right:40rpx;
				color:#999;
				font-size:32rpx;
			}
		}
	}
</style>